<template>
  <el-dialog v-model=parentDialogFormVisible title="选择收货地址" @close="closeDialog" width="50%">
    <el-table
        :data="AddressList"
        highlight-current-row
        @current-change="handleCurrentChange"
        style="width: 100%"
    >
      <el-table-column label="地区" width="300">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ CodeToText[scope.row.province] }} / {{ CodeToText[scope.row.city] }} / {{ CodeToText[scope.row.area] }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="详细地址" width="450">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.addressDetail }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="收货号码">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.phoneNum }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-button @click="closeDialog" type="danger" round style="margin: 20px">取消</el-button>
    <el-button @click="commitBook" type="primary" round style="margin: 20px">确定</el-button>
  </el-dialog>
</template>

<script>
import request from "@/http/request";
const {CodeToText} = require("element-china-area-data/dist/app");

export default {
  name: "SelectAddress",
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
  },
  emits: {
    closeDialog: {
    },
    commitBook: {
    },
  },
  watch: {
    dialogFormVisible: function ( newVal ){
      this.parentDialogFormVisible = newVal;
    },
  },
  data() {
    return {
      parentDialogFormVisible: this.dialogFormVisible,
      AddressList: [],
      selectAddress: -1,
    };
  },
  methods: {
    getAddressList() {
      request({
        url: "/user/getAddressInfo",
        method: "get",
      }).then((response) => {
        if (response.code === 200) {
          // this.$tipUtil.successTip(response.msg);
          this.AddressList = response.data;
        } else {
          this.$tipUtil.errTip(response.msg);
        }
      })
    },
    closeDialog: function() {
      this.$emit('closeDialog');
    },
    handleCurrentChange: function (currentRow) {
      this.selectAddress = currentRow.id;
    },
    commitBook: function () {
      if (this.selectAddress !== -1) {
        this.$emit('commitBook', this.selectAddress.toString());
        this.closeDialog();
      } else {
        this.$tipUtil.warningTip("请您选择收货地址！");
      }
    },
  },
  setup() {
    return {
      CodeToText,
    }
  },
  mounted() {
    this.getAddressList();
  }
}
</script>

<style scoped>

</style>